<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
       使用template实现数据的模板编写  会覆盖容器中原有的内容
       可以将模板中的内容直接写在容器中  解决容器中内容被覆盖的问题
-->
<div id="app">
    <h1>学生信息展示</h1>
    <p>学生姓名:{{name.toUpperCase()}}</p>
    <p>学生年龄:{{age+10}}</p>
    <p>学生学号:{{stuNo}}</p>
</div>

<script>
    const vm = new Vue({
        el:"#app",      //  通过el属性 实现容器和实例的绑定  替代 $mount() 挂载的方式
        data:{
            name: 'jack',
            age: 18,
            stuNo: '2023002'
        }
    })

    // vm.$mount("#app")
</script>

</body>
</html>
